<!DOCTYPE html>
<p>There should be a green square below, and no red.</p>
<!-- In the first layout pass we'll use the specified column height. We'll need
     to insert pagination struts at breaks if some unbreakable content (such as
     a line) would otherwise be broken in half. When calculating a balanced
     column height, we need to subtract these struts again, to calculate a
     minimal column height. The final column height (in the second layout pass)
     in this case should be 60px, since that's what the contents
     require. (8*20px + 2*40px) / 4 = 60px -->
<div style="columns:4; column-gap:0; width:60px; height:80px; orphans:1; widows:1; line-height:20px;">
    <div id="parent" style="background:red;">
        <div id="child1" style="background:green;">
            <br>
            <br>
            <br>
            <br>
            <!-- In the first layout pass, when column height is 80px, as
                 specified, there'll be a break between these two
                 lines. There'll be no pagination strut, though, since four
                 lines take up exactly 80px. -->
            <br>
            <br>
            <br>
        </div>
        <!-- There'll be a break between these two blocks. At this point in the
             first layout pass we have 20px left in the second column (since it
             contains 3 lines == 60px). The 20px will be lost, and the next
             block therefore needs a pagination strut of 20px. -->
        <div id="child2" style="line-height:40px; background:green;">
            <br>
        </div>
        <div id="child3" style="background:green;">
            <br>
        </div>
        <!-- There'll be another break between these two blocks. At this point
             in the first layout pass we have 20px left in the third column. The
             situation is exactly the same as at the previous breaks. We need
             another pagination strut of 20px. -->
        <div id="child4" style="line-height:40px; background:green;">
            <br>
        </div>
    </div>
    <!-- The height of #parent (which comprises the entire multicol container)
         in the first layout pass will be the height of all lines, plus
         pagination struts. We have 8 lines that are 20px tall, and 2 lines that
         are 40px tall. We have one pagination strut before the the third column
         and one before the fourth one, each 20px. Total height of #parent in
         the initial layout pass will be 8*20px + 2*40px + 2*20px = 280px. To
         find the minimal balanced height, we should look strictly at the
         contents, and subtract the 40px of strut. We end up with 240px, which
         we should balance over the 4 columns. So we get a column height of
         60px. -->
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(() => {
    var parent = document.getElementById("parent");
    var child1 = document.getElementById("child1");
    var child2 = document.getElementById("child2");
    var child3 = document.getElementById("child3");
    var child4 = document.getElementById("child4");
    assert_equals(parent.offsetHeight, 240);
    assert_equals(child1.offsetHeight, 140);
    assert_equals(child2.offsetHeight, 40);
    assert_equals(child3.offsetHeight, 20);
    assert_equals(child4.offsetHeight, 40);
}, "Balance, non-auto height, unused space at break after perfect break with no space loss");
</script>
